<template>
    <div class="header-container">
        <div class="l-content">
            <button class="btn_menu el-icon-menu" @click="handleMenu">
            </button>
            <div class="tag-container">
                <div class="text-tag">
                    <span class="text">{{ content }}</span>
                </div>
            </div>
        </div>
        <div class="r-content">
            <el-dropdown @command="handleClick" trigger="click">
                <button class="btn_menu el-dropdown-link el-icon-s-custom"></button>

                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <el-popover placement="left-start" title="个人信息" width="300" trigger="hover">
                            <!-- 自定义内容 -->
                            <div slot="reference">个人中心</div>

                            <!-- 上部分内容：用户名和密码 -->
                            <div style="padding-top: 2px;">
                                <p><strong>用户名：</strong> {{ UserData.username }}</p>

                                <p><strong>密码：</strong> {{ UserData.password }}</p>
                                <el-divider></el-divider> <!-- 分割线 -->
                            </div>

                            <!-- 下部分内容：上次登录事件和地点 -->
                            <div>
                                <p><strong>本次登录时间：</strong> {{ UserData.date }}</p>

                                <p><strong>本次登录地点：</strong> {{ UserData.place }}</p>
                            </div>
                        </el-popover>

                    </el-dropdown-item>
                    <el-dropdown-item command="cancel">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>



<script>
import Cookie from 'js-cookie'

export default {
    data() {
        return {

        }
    },
    methods: {
        // 菜单栏是否展开
        handleMenu() {
            this.$store.commit('collapseMenu')
        },
        // 登出
        handleClick(command) {
            if (command == 'cancel') {
                console.log('退出');
                // 清除cookie中的token
                Cookie.remove('token')
                // 跳转到登录也
                this.$router.push('/')
            }
        },
    },
    computed: {
        content() {
            return this.$store.state.tab.menuContent
        },

        UserData() {
            return this.$store.state.userData.userData
        }
    }
}
</script>

<style lang="less" scoped>
@import '../style/button/button_menu.css';

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #cde4de;
    color: #141212;
}

.header-container {
    padding: 0 20px;
    background-color: #fff;
    color: #000;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .l-content {
        display: flex;
        justify-content: center;
        align-items: center;

        .tag-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: auto;
            height: 40px;
            box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
            border-radius: 0.5rem;
            padding: 0.25rem;
            box-sizing: border-box;
            margin-left: 15px;


            .text-tag {
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #cde4de;
                width: clac(100% - 30px);
                height: 30px;
                border-radius: 5px;
                padding: 10px;

                .text {
                    line-height: 30px;
                    font-size: 14px;
                    font-weight: 550;
                }
            }
        }
    }

    .r-content {
        width: 16px;
        height: 16px;
        display: flex;
        justify-content: center;
        align-items: center;

        .el-dropdown-link {
            cursor: pointer;
            font-size: 22px;
            padding: 8px;
        }
    }
}
</style>